<template>
  <div class="infinite-container" >
    <mu-stepper :activeStep="activeStep" style="margin:1em 0;">
        <mu-step>
          <mu-step-label>
            选择验证方式
          </mu-step-label>
        </mu-step>
        <mu-step>
          <mu-step-label>
            安全验证
          </mu-step-label>
        </mu-step>
        <mu-step>
          <mu-step-label>
            修改绑定
          </mu-step-label>
        </mu-step>
      </mu-stepper>

    <div v-if="activeStep === 1">
      <div class="bgwhite">
        <mu-flexbox>
            <mu-flexbox-item grow="1"></mu-flexbox-item>
            <mu-flexbox-item grow="18">
              <mu-text-field hintText="请输入手机号" disabled v-model="person.mobile" type="text" fullWidth></mu-text-field>
            </mu-flexbox-item>
            <mu-flexbox-item grow="1"></mu-flexbox-item>
          </mu-flexbox>
          <mu-divider/>

          <mu-flexbox>
            <mu-flexbox-item grow="1"></mu-flexbox-item>
            <mu-flexbox-item grow="10">
              <mu-text-field hintText="验证码" v-model="vcode" type="number" fullWidth></mu-text-field>
            </mu-flexbox-item>
            <mu-flexbox-item grow="9" class="text-right">
            <mu-raised-button  :label="vcodeLabel" @click="selectCode" fullWidth primary :disabled="vcodeDisabled"></mu-raised-button>
            </mu-flexbox-item>
            <mu-flexbox-item grow="1"></mu-flexbox-item>
          </mu-flexbox>
          <mu-divider/>
      </div>

      <mu-flexbox :gutter="0" style="margin-top:4em;">
        <mu-flexbox-item grow="2"></mu-flexbox-item>
        <mu-flexbox-item grow="16">
         <mu-raised-button class="submit-btn" label="下一步" @click="nextStep" fullWidth primary></mu-raised-button>
        </mu-flexbox-item>
        <mu-flexbox-item grow="2"></mu-flexbox-item>
      </mu-flexbox>
    </div>

    <div v-if="activeStep === 2">
      <div class="bgwhite">
        <mu-flexbox>
            <mu-flexbox-item grow="1"></mu-flexbox-item>
            <mu-flexbox-item grow="18">
              <mu-text-field hintText="请输入新手机号"  v-model="mobileNew" type="text" fullWidth></mu-text-field>
            </mu-flexbox-item>
            <mu-flexbox-item grow="1"></mu-flexbox-item>
          </mu-flexbox>
          <mu-divider/>

          <mu-flexbox>
            <mu-flexbox-item grow="1"></mu-flexbox-item>
            <mu-flexbox-item grow="11">
              <mu-text-field hintText="验证码" v-model="vcodeNew" type="text" fullWidth></mu-text-field>
            </mu-flexbox-item>
            <mu-flexbox-item grow="7">
            <mu-raised-button :label="vcodeLabel" @click="selectCode" fullWidth primary :disabled="vcodeDisabled"></mu-raised-button>
            </mu-flexbox-item>
            <mu-flexbox-item grow="1"></mu-flexbox-item>
          </mu-flexbox>
          <mu-divider/>
      </div>

      <mu-flexbox :gutter="0" style="margin-top:4em;">
        <mu-flexbox-item grow="2"></mu-flexbox-item>
        <mu-flexbox-item grow="16">
         <mu-raised-button class="submit-btn" label="绑定新号码" @click="updateMobile" fullWidth primary></mu-raised-button>
        </mu-flexbox-item>
        <mu-flexbox-item grow="2"></mu-flexbox-item>
      </mu-flexbox>
    </div>


  </div>
</template>
<script>
import {commonAjax, RESTFUL_API} from '@/api/api'
import {testPhone} from '@/common/js/util'

const VCODE_LABEL_DEFALT = '获取验证码'

export default {
  data () {
    return {
      person: JSON.parse(sessionStorage.person || '{}'),
      mobileNew: '',
      vcode: '',
      vcodeNew: '',
      vcodeDisabled: false,
      vcodeLabel: VCODE_LABEL_DEFALT,
      activeStep: 1
    }
  },
  methods: {
    selectCode () {
      this.activeStep === 1 ? this.getVcode(this.person.mobile) : this.getVcode(this.mobileNew)
    },
    getVcode (mobile) {
      if (testPhone(mobile)) {
        this.vcodeDisabled = true
        commonAjax(`${RESTFUL_API.sendSmsCode}`, {mobile}).then(res => {
          if (res.data.code == 200) {
            this.$store.commit('UPDATE_TOAST', {message: '验证码发送成功'})
            this.timeout()
          } else {
            this.vcodeDisabled = false
            this.$store.commit('UPDATE_TOAST', {message: res.data.msg})
          }
        })
      }
    },
    timeout () {
      let start = 60
      let countDown = () => {
        this.vcodeTimer = setTimeout(() => {
          this.vcodeLabel = (start--) + ''
          countDown()
          if (start <= 0) {
            this.vcodeDisabled = false
            this.vcodeLabel = VCODE_LABEL_DEFALT
            clearTimeout(this.vcodeTimer)
          }
        }, 1000)
      }
      countDown()
    },
    nextStep () {
      if (!this.vcode) {
        return
      }
      this.verifyCode(this.person.mobile, this.vcode).then(res => {
          if (res.data.code == 200) {
          this.activeStep = 2
          this.vcodeDisabled = false
          clearTimeout(this.vcodeTimer)
          this.vcodeLabel = VCODE_LABEL_DEFALT
        } else {
          this.$store.commit('UPDATE_TOAST', {message: res.data.msg})
        }
      })
    },
    verifyCode (mobile, code) {
      return commonAjax(`${RESTFUL_API.verifyCode}`, {mobile, code})
    },
    updateMobile () {
      if (!this.mobileNew || !this.vcodeNew) {
        return
      }
      this.verifyCode(this.mobileNew, this.vcodeNew).then(res => {
        if (res.data.code == 200) {
          commonAjax(`${RESTFUL_API.updateMobile}`, {oldMobile: this.person.mobile, newMobile: this.mobileNew}).then(r => {
            if (r.data.code == 200) {
              this.$store.commit('UPDATE_TOAST', {
                message: '修改手机号成功',
                fn: () => this.$router.push(`/login?${this.$APP_PLATFORM_NAME}=${sessionStorage[this.$APP_PLATFORM_NAME]}`)
              })
            } else {
              this.$store.commit('UPDATE_TOAST', {message: r.data.msg})
            }
          })
        } else {
          this.$store.commit('UPDATE_TOAST', {message: res.data.msg})
        }
      })
    }
  },
  mounted () {
  }
}
</script>

